Halo teman teman, kembali lagi bersama saya Gilang. Kali ini saya ingin membahas tentang aplikasi tunelling gratis. Dalam kata lain hostingan sementara gratis. Apa itu? Jika kalian seorang developer tentu tidak asing lagi dengan yang namanya “Stagging” yaps, sebuah server kosong yang digunakan untuk preview aplikasi dalam stage Production. Nah kali ini, kita bisa memanfaatkan aplikasi gratis yang mirip mirip dengan versi stagging, yaitu sebuah aplikasi free guna untuk keperluan deployment aplikasi ke public (walau hanya sementara). Mereka adalah Expose dan Ngrok. Konsep kerja aplikasi ini disebut dengan Tunelling. Tunelling adalah dasar dari VPN untuk membuat jaringan privat melalui jaringan internet, tunneling juga merupakan proses yang memiliki tujuan membuat satu jenis paket data jaringan menjadi jenis data lainnya atau suatu pembungkusan protokol ke dalam paket protokol. Tanpa ber lama-lama mari kita lanjut ke artikel yang ada.
Menggunakan Ngrok
Ngrok adalah tunelling gratis yang paling populer saat ini, Ngrok menawarkan expose aplikasi kalian sampai ke port yang spesifik. Baiklah, demikian adalah cara untuk instalasi Ngrok dan percobaannya.
Setelah masuk kedalam website langsung saja ke menu Download.
Sesuaikan dengan sistem operasi kalian, disini saya menggunakan windows. Klik download for Windows. Setelah terdownload, file akan berbentuk zip lalu esktrak.
Jika ngrok.exe sudah terlihat, silahkan masuk ke aplikasi ngrok.exe. Lalu akan muncul tampilan seperti ini:
Jika sudah muncul tampilan cmd seperti diatas, saatnya untuk percobaan. Disini saya akan menggunakan Vue.js sebagai aplikasi yang akan saya deploy. Maka pertama-tama saya akan run aplikasi Vue.js saya menggunakan $ npm run serve lalu saya akan expose port tersebut menggunakan Ngrok agar bisa kita akses dimanapun selagi Ngrok masih menyala.
Lihat gambar diatas, Gambar kiri adalah projectan Vue.js saya, Terlihat Vue.js saya sudah running di local pada localhost:8080 dan lihat Gambar kanan yang mana itu adalah Tunelling dari Ngrok. Command untuk expose sebuah http server seperti ini adalah
$ ngrok http
Disana saya menuliskan $ ngrok http 8080 karena aplikasi Vue.js saya berjalan pada port 8080. Setelah mengetikkan perintah tersebut, sekarang kita bisa klik enter pada Ngrok dan akan terlihat tampilan Ngrok cmd menjadi seperti ini:
Terlihat, bahwa http server localhost:8080 di forward ke https://50482b3d103a.ngrok.io (ini adalah ip generate random dari generate yang bisa kita akses di public). Jika sudah, kita bisa mencoba akses untuk membuktikannya.
Terihat gambar kiri adalah akses langsung dari localhost dan gambar kanan adalah akses dari tunnel Ngrok. Namun, ada sedikit kendala disini yaitu tunneling dari Ngrok tidak bisa membaca aplikasi Vue.js kita dengan error “Invalid Host Header”. Mengapa? Ini disebabkan karena Vue.js memiliki header custom pada saat $ npm run serve , Mari kita lihat.
Terlihat, bahwa setelah npm run serve aplikasi “hanya boleh” diakses jika melalui localhost:8080 atau 192.168.0.186:8080 atau dengan kata lain, jika kita mengakses dengan identitas lain (seperti url tunnel kita yaitu https://50482b3d103a.ngrok.io) maka Vue.js akan menolak. Lalu bagaimana? Ngrok menyediakan fitur custom header dan tentunya masih banyak fitur lagi yang bisa kalian baca baca pada dokumentasi website resminya di https://ngrok.com/ . Baiklah, kita akan mencoba untuk expose ulang dengan menggunakan custom header yang diminta Vue.js agar kita bisa akses menggunakan tunneling Ngrok.
Silahkan hentikan Ngrok dengan menekan Ctrl + C. Lalu ketikkan perintah berikut:
$ ngrok http 8080 -host-header=”localhost:8080"
Lalu enter, dan akan muncul dashboard Ngrok seperti biasa.
Yap, sudah terlihat bahwa ngrok berhasil expose menggunakan custom header. Kini saatnya kita coba menggunakan URL baru nya yaitu di https://0f9f9373dfc2.ngrok.io .
Yap, terlihat sudah bisa diakses melalui URL exposean hasil Ngrok. Namun untuk membuktikan URL ini bisa diakses di semua device dan ISP kita akan mencobanya pada Mobile device dengan jaringan dan tempat yang berbeda.
Yap, ternyata kita juga sudah bisa mengaksesnya melalui device lain. Ini artinya aplikasi kita sudah berjalan atau ter-ekspose di public. Namun tentu saja karena ini adalah sebuah aplikasi gratis, kita tidak bisa dapat banyak seperti custom domain, kecepatan, realibilitas,dll namun setidaknya kita bisa mencoba untuk membuat alternatif pada saat kita develop suatu aplikasi yang mempunyai kebutuhan kolaborasi jarak jaruh.
Mohon dibaca:
· Ngrok sebenarnya bisa tanpa waktu or timeless dan unlock semua fitur yang ada seperti custom domain, reabilitas, dan timeless. Hanya saja ini membutuhkan paket berbayar yang bisa kalian akses pada https://dashboard.ngrok.com/
· Ngrok perlu login menggunakan auth token masing masing akun yang bisa kalian akses pada https://dashboard.ngrok.com/get-started/your-authtoken , Silahkan kunjungi situs itu (daftar akun baru jika belum memiliki atau login jika sudah memiliki) Lalu paste token yang ada pada masing masing akun kalian ke cmd Ngrok.
· Tentu saja kita tidak hanya bisa meng-ekspose aplikasi Vue.js. Kita bisa ekspose HTML, Laravel, dsb. Mengenai command sudah banyak bertebaran di internet dan sudah ada juga cara start pada website resminya.
2. Menggunakan Expose
Expose adalah salah satu alternatif tunneling yang saya rekomendasikan, karena ini juga mirip seperti Ngrok yaitu gratis. Dan sebenarnya Expose ini memiliki lebih banyak fitur yang tentunya bisa kalian baca baca pada dokumentasi resminya di https://expose.dev/ . Baiklah, kita juga akan menggunakan studi kasus yang sama seperti menggunakan Ngrok diatas, yaitu kita akan mencoba mengekspose aplikasi Vuejs.
Langkah Percobaan:
a. Instalasi Composser
Kita akan instalasi Expose menggunakan bantuan Composer yang bisa di download pada https://getcomposer.org/download/. Dan tentunya saya tekankan, disini saya eksekusi menggunakan Windows OS.
Download Composer-Setup.exe dan jalankan instalasi pada windows seperti biasa, Setelah instalasi dijalankan, silahkan untuk verifikasi Composer pada windows.
Kita bisa cek menggunakan $ compser –version . Jika version sudah tampil, kita bisa membuat kesimpulan bahwa Composer sudah terinstall dan kita bisa melanjutkan untuk instalasi Expose. Silahkan jalankan script berikut untuk instalasi Expose :
$ composer global require beyondcode/expose
Setelah selesai, pastikan expose sudah terinstall juga dengan melakukan verifikasi:
$ expose –version
Seperti biasa, jika sudah tampil version maka kita sudah dapat menyimpulan bahwa Expose juga sudah ter-install dan siap dijalankan.
Baik, kita akan mulai studi kasus lagi. Studi kasusnya masih sama seperti kita menggunakan ngrok tadi, namun kali ini kita akan menggunakan Expose untuk tunneling nya.
Diharapkan untuk menggunakan bash cmd seperti Git CMD,dsb karena expose tidak bisa jalan jika menggunakan command prompt bawaaan windows 10. Adapun untuk instalasi Git CMD bisa download pada https://git-scm.com/downloads .
Seperti yang terlihat diatas, kita sudah berhasil deploy Vuejs menggunakan Expose. Saatnya kita coba menggunakan url yang di generate oleh Expose (pada kasus saya waktu itu adalah https://gtnh3yvw1k.sharedwithexpose.com) .
Yap, kita sudah bisa akses menggunakan url public dari Expose, sekarang saatnya kita memastikan pada perangkat lainnya (disini menggunakan Mobile Device di lain tempat dan tidak satu jaringan).
Yap, kita sudah berasil akses dari jaringan luar menggunaakn tunnel Expose.
· Sama seperti Ngrok, Expose juga memiliki akun guna untuk kepentingan fitur yang lebih advanced yang bisa diakses pada https://expose.dev/login
Adapun permasalahan OS yang digunakan adalah disini saya hanya menggunakan Windows sebagai wahana percobaan, tapi disini penulis hanya ingin sharing bagaimana konsep aplikasi ini bekerja. Maka dari itu jika kalian ingin menggunakannya di sistem operasi lain tentunya sudah tidak perlu bingung karena memahami konsepnya, Adapun yang berbeda hanyalah sebatas cara instalasinya saja. Semoga membantu.
Kesimpulan:
Bahwa sebenarnya sangat banyak aplikasi pendukung kita untuk menunjang kerja kita dalam expose aplikasi ke jaringan secara sementara, namun pengetahuan penulis baru sebatas ini. Silahkan sampaikan kepada saya dan kita semua para pembaca guna bisa menjadi wadah sharing yang bermanfaat bagi kita semua. Dan tentunya tutorial diatas dibuat benar benar dalam rangka sharing. Terima kasih kepada para pembaca. Good Day!
Tangerang - Clouds.png){kind=logo}
0 Komentar